<template>
  <view>
	  
    <view
      @click="$emit('click')"
      class="qBtn"
      :style="{          
        height: (height) + 'rpx',
        width: width==-1?'auto':(width + 'rpx'),
        minWidth: width==-1?'192rpx':(width + 'rpx'),
      }"
    >
      <view
        class="qBtnBody"
        :style="{
          top:btnTop,
          right: btnRight,
          backgroundColor: btnTypeList[type].bgColor,
          height: (height * 0.94) + 'rpx',
          width: width==-1?'auto':(width + 'rpx'),
          minWidth: width==-1?'192rpx':(width + 'rpx'),
          paddingLeft: width==-1?'30rpx':'unset',
          paddingRight: width==-1?'30rpx':'unset',
        }"
      >
        <view
          class="leftTop"
          :style="{
            left: (height / 6) + 'rpx',
            top: (height / 6) + 'rpx',
          }"
        ></view>
        <view
          class="bottomRound"
          :style="{
            background: btnTypeList[type].roundBgColor,
            top: (height * 0.33) + 'rpx',
          }"
        ></view>
        <view class="btnBody">
          <text
            class="btnText"
            :style="{
              fontSize: fontSize + 'rpx',
              lineHeight: fontSize + 'rpx',
			  color : junColor,
			  letterSpacing : '2rpx'
            }"
          >{{text}}</text>
        </view>
      </view>
      <view
        class="bottomBg"
        :style="{
          height: (height * 0.94) + 'rpx',
          width: width==-1?'auto':(width + 'rpx'),
          minWidth: width==-1?'192rpx':(width + 'rpx'),
          backgroundColor: btnTypeList[type].bottomBg,
        }"
      ></view>
    </view>
    
  </view>
</template>
<script>
/**
 * 按钮样式对应的类型列表
 * typeName:{
 *   bgColor: 按钮背景色
 *   roundBgColor: 按钮背景渐变色
 *   bottomBg: 按钮底部深色颜色
 * }
 */
const btnTypeList = {
	junjun: {
	  bgColor: "#F9A02E",
	  roundBgColor: "linear-gradient(180deg, rgba(228, 255, 210, 0.17) 0%, #F9A02E 100%)",
	  bottomBg: "rgba(187, 32, 0, 0.79)",
	},
  brown: {
    bgColor: "#FF9463",
    roundBgColor: "linear-gradient(180deg, rgba(228, 255, 210, 0.17) 0%, #FF8858 100%)",
    bottomBg: "#C56032",
  },
  green: {
    bgColor: "#94E713",
    roundBgColor: "linear-gradient(180deg, rgba(228, 255, 210, 0.17) 0%, #4AE14B 100%)",
    bottomBg: "#5FAA2F",
  },
}



/**
 * 通用3D按钮
 */
export default {
  props: {
    /**
     * 按钮类型
     */
    type: {
      type: String,
      default: "junjun",
      validator(v){
        return Object.keys(btnTypeList).includes(v)
      }
    },
    /**
     * 按钮高度 rpx
     */
    height: {
      type:  [Number,String],
      default: 60
    },
    /**
     * 按钮文字
     */
    text: {
      type: [String,Number,Boolean],
      default: ""
    },
	/**
	 * 按钮颜色
	 */
	junColor: {
	  type: [String,Number,Boolean],
	  default: "#fff"
	},
    /**
     * 按钮宽度 (rpx) 默认-1为自适应
     */
    width: {
      type:  [Number,String],
      default: -1,
    },
    /**
     * 按钮定位TOP
     */
    btnTop: {
      type: Number,
      default: 0,
    },
    /**
     * 按钮定位right
     */
    btnRight: {
      type: Number,
      default: 0,
    },
    /**
     * 字体大小
     */
    fontSize: {
      type: [Number,String],
      default: 30,
    },
  },
  data() {
    return {

      btnTypeList,
      
    }
  },
  methods: {
    
  },
}
</script>
<style lang="scss" scoped>

.qBtn:active{
  transform: translate(1rpx, 1rpx);
}
.qBtn{
  position:relative;
  .qBtnBody{
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 192rpx;
    border-radius: 999px;
    overflow: hidden;
    
    .leftTop{
      height: 2px;
      width: 6px;
      border-radius: 50%;
      background-color: #fff;
      position: absolute;
      transform: rotate(-45deg);
    }
    .bottomRound{
      position: absolute;
      left: 6rpx;
      right: 6rpx;
      bottom: 0;
      border-radius: 999px;
    }
    .btnBody{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      color: #fff;
      .btnText{
        font-size: 30rpx;
        line-height: 30rpx;
        font-weight: bold;
        text-shadow: 0rpx 2rpx 2rpx rgba(0, 0, 0, 0.5);
      }
    }
  }
  
  .bottomBg{
    z-index: 1;
    position: absolute;
    bottom: 0;
    border-radius: 999px;
    box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0,0,0,0.5);
  }
}
</style>